<template>
  <div class="page-div">
    <div ref="left" class="page-item">
      <slot name="left"></slot>
    </div>
    <div ref="right" class="page-item">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Left-RightPage",
  props:{
    leftPercent:{
      type:String,
      default:()=>{
        return '50%';
      }
    },
    rightPercent:{
      type:String,
      default:()=>{
        return '49%';
      }
    },
  },
  mounted() {
    this.$refs["left"].style.width=this.leftPercent;
    this.$refs["right"].style.width=this.rightPercent;
  }
}
</script>
<style scoped>
.page-div{
  width: 100%;
  height: 100%;
}
.page-item{
  display: inline-block;
  vertical-align: top;
  height: 100%;
}
</style>